<template>
	<view class="motion animation-fade">
         <!-- 顶部-->
		 <cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">记事本</block>
		</cu-custom>
		
		<!-- 通知 -->
		<view 
			class="content-notice bar-shadown" 
			v-if="notice.contentmain==''?false:true " 
			:style="[{ backgroundColor:'rgba(0,0,0,0.2)',color:'#FFFFFF'}]"
		>
			<view class="flex">
				<view class="flex-treble">
					<text class="lg icon cuIcon-notice"></text>
					{{notice.contentmain}}
				</view>
				<view class="justify-start icon-close" @tap="noticeClose">
					<text class="lg cuIcon-close"></text>
				</view>
			</view>
		</view>
		
		<scroll-view scroll-y class="page">
			<!-- 顶部数据图 -->
			<view class="bg-img padding-bottom-xl motion_top animation-fade" v-if="goalC[0]">
				
				<view class="m-time heart1" >
					<view class="flex">
						<view class="cu-tag cu-tag-top round line-blue shadow"><text class="text-blue">{{ goalC[0].progress }}</text></view>
						<view class="flex-sub page-m">
							<view class="t-title">{{ goalC[0].actual }}</view>
							<view class="t-text"><text class="cuIcon-timefill"></text>{{ goalC[0].goal }}</view>
						</view>
					</view>
				</view>
				
				<view class="m-kll heart2">
					<view class="flex ">
						<view class="cu-tag cu-tag-top round line-cyan shadow"><text class="text-cyan">{{ goalC[2].progress }}</text></view>
						<view class="flex-sub page-m">
							<view class="t-title">{{ goalC[2].actual }}</view>
							<view class="t-text"><text class="cuIcon-usefullfill"></text>{{ goalC[2].goal }}</view>
						</view>
					</view>
				</view>
				
				<view class="m-foot heart3">
					<view class="flex">
						<view class="cu-tag cu-tag-top round line-red shadow"><text class="text-red">{{ goalC[1].progress }}</text></view>
						<view class="flex-sub page-m">
							<view class="t-title">{{ goalC[1].actual }}</view>
							<view class="t-text"><text class="cuIcon-hotfill"></text>{{ goalC[1].goal }}</view>
						</view>
					</view>
				</view>
				
			</view>
			
			<!-- 具体运动数据 -->
			<view class="tagTitle" v-if="ydList[0]">运动</view>
			<scroll-view scroll-x="true" class="page_motion_tag animation-fade" v-if="ydList[0]">
				
				<view class="flex" >
					<view class="flex-sub" v-for="(item,index) in ydList" :key="index">
						<view class="cu-card article" @tap="ydToUrl(index)">  <!--跳转到详情-->
							<view class="cu-item bar-shadown bg-img bg-img-yd" :style="[{backgroundImage:'url('+item.img+')'}]" >
								<view :class="['cu-yd',item.bgcolor ]">
									<view class="cardTitle">
										<!-- 运动类型 -->
										<view class="flex">
											<view class="flex-sub yd-title">{{item.title}}</view>
										</view>
										<!-- 运动详情 -->
										<view class="flex yd-text">
											<view class="flex-sub">
												<view class="flex yd-text-title">{{item.title_0}}</view>
												<view class="flex yd-text-t">{{item.content_0}}</view>
											</view>
											<view class="flex-sub">
												<view class="flex yd-text-title">{{item.title_1}}</view>
												<view class="flex yd-text-t">{{item.content_1}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</scroll-view>
			
			<!-- 具体健康数据 -->
			<view class="tagTitle" v-if="jkList">健康</view>
			<view class="jk animation-fade" v-if="jkList">
				<view class="cu-card cu-card-jk article">
					<view class="cu-item bg-img bar-shadown">
						<view class="cardTitle-jk">
							<view class="flex">
								<scroll-view scroll-x class="bg-white nav text-center">
									<view 
										class="cu-item" 
										:class="index==TabCur?'text-blue jk-cur cur':''" 
										v-for="(jk,index) in jkList" 
										:key="index" 
										@tap="tabSelect" 
										:data-id="index"
									>
										<view v-if="index=='sleep'">睡眠</view>
										<view v-if="index=='heartbeat'">心率</view>
										<view v-if="index=='pulse'">脉搏</view>
									</view>
								</scroll-view>
							</view>
							<!-- 健康详情 -->
							<!-- 睡眠 -->
							<view v-if="TabCur=='sleep'">
								<view 
									class="flex animation-fade jk-text" 
									v-for="(sleepD,index) in jkList.sleep[0].content" 
									:key="index"
								>
									<view class="cu-timeline" >
										<view class="cu-time" :style="[{color:sleepD.color}]">{{sleepD.time}}</view>
										<view class="cu-item" :style="[{color:sleepD.color}]" v-if="sleepD.content">
											<view class="content" :style="[{ backgroundColor:sleepD.color,color:'#FFFFFF'}]">
												{{sleepD.content}}
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 心率 -->
							<view v-if="TabCur=='heartbeat'">
								<view class="flex animation-fade justify-center heartbeat">
									<view class="cu-tag cu-tag-top round line-red heartbeat-line shadow">
										<text class="line-red heartbeat-text">0</text>
									</view>
								</view>
								<view class="flex justify-center heartbeat-button ">
										<button class="cu-btn bg-red margin-tb-sm lg shadow">开始检测</button>
								</view>
							</view>
							<!-- 脉搏 -->
							<view v-if="TabCur=='pulse'">
								<view class="flex animation-fade justify-center pulse">
									<view class="cu-tag cu-tag-top round line-blue pulse-line shadow">
										<text class="line-blue pulse-text">0</text>
									</view>
								</view>
								<view class="flex justify-center pulse-button ">
										<button class="cu-btn bg-blue margin-tb-sm lg shadow">开始检测</button>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
			
			
			
		</scroll-view>
	</view>
</template>

<script>
	var _this;
	import {
		getGoalc,
		getYdList,
		getJkList,
	} from '../../service/api/motion.js' //运动api
	import {
		getisLogin,
	} from '../../service/api/login.js' //登陆api
	//通知数据
	const notice={
		contentmain:"请连接蓝牙进行操作",
		content:{
			0:'请连接蓝牙设备和打开位置服务进行操作',
			1:'坚持运动'
		}
	}
	
	export default {
		data() {
			return {
				//通知
				notice: notice,
				//计划完成度
				goalC: '',
				//运动数据
				ydList: '',
				//健康数据
				jkList: '',
				//健康数据切换
				TabCur:'sleep'
			}
		},
		mounted(){
			_this=this
			getisLogin() //是否登陆
			
			_this.getData()//获取数据
		},
		methods: {
			getData(){
				//获取数据
				const goalcData=_this.$store.getters.getGoalcData; //计划完成度数据
				const ydData=_this.$store.getters.getYdData; //运动数据
				const jkData=_this.$store.getters.getJkData; //健康数据
				
				if(goalcData!=""){
					_this.goalC=goalcData
				}else{
					//获取数据计划完成度
					getGoalc()
					.then(res => {		
						console.log(res)
						_this.goalC=res.data
						_this.$store.dispatch('setGoalcData',res.data)
					}).catch(err => {
						
					})
				}
				
				if(ydData!=""){
					_this.ydList=ydData
				}else{
					//获取运动数据
					getYdList()
					.then(res => {
						console.log(res)
						_this.ydList=res.data
						_this.$store.dispatch('setYdData',res.data)
					}).catch(err => {
						
					})
				}
				
				if(jkData!=""){
					_this.jkList=jkData
				}else{
					//获取健康数据
					getJkList()
					.then(res => {
						console.log(res)
						_this.jkList=res.data
						_this.$store.dispatch('setJkData',res.data)
					}).catch(err => {
						console.log(err)
					})
				}
			},
			noticeClose(e){
				//关闭通知
				this.notice.contentmain=""
			},
			noticeRun(index){
				/**
				 * 通知轮询
				 * @param {index} 通知内容下标  
				 */
			},
			tabSelect(e){
				//健康切换
				this.TabCur = e.currentTarget.dataset.id
			},
			ydToUrl(e){
				//运动
				const item=this.ydList[e]
				
				const datas= JSON.stringify({
					'title':item.title,
					'bgcolor':item.bgcolor,
					'title_total_0':item.title_total_0,
					'content_total_0':item.content_total_0,
					'title_total_1':item.title_total_1,
					'content_total_1':item.content_total_1,
					'title_total_2':item.title_total_2,
					'content_total_2':item.content_total_2,
				})
				console.log(datas)
				if(datas.indexOf("title_total_0")!=-1){
					uni.navigateTo({
						url: './motion/children/motion_ydData?id=1&datas='+datas,
						animationType: 'pop-in',
						animationDuration: 200
					});
				}
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../style/color/color.scss"; //颜色
	
	.motion{
		margin-top:100upx;
	}
	.motion_top{
		margin-top: 128upx;
		background-image: url("");
		background-position: center center; 
		background-size: cover; 
		background-repeat: no-repeat; 
		height: 410upx;
		width: 500upx;
		margin-left: 128upx;
	}
	.content-notice {
		padding: 15upx;
		margin: 30upx;
		border-radius: 8upx;
	}
	.icon{
		margin-right: 6upx;
	}
	.icon-close{
		margin-top: 4upx;
	}
	.tagTitle{
		margin: 48upx 30upx 0upx 30upx;
		font-size: 32upx;
		font-weight: 100; 
		color: $blackColor;
	}
	
	/* 顶部数据圈 */
	.m-time{
		position: absolute;
		left:216upx;
		top:36upx;
		font-weight: 900 !important;
		color: $blueColor;
	}
	.m-foot{
		position: absolute;
		left:24upx;
		top:376upx;
		font-weight: 900 !important;
		color: $redColor;
	}
	.m-kll{
		position: absolute;
		left:500upx;
		top:248upx;
		font-weight: 900 !important; 
		color: $cyanColor;
	}
	
	.line-red{
		color:$redColor !important;
	}
	.text-red{
		font-size: 24upx;
		color:$redColor !important;
	}
	.line-blue{
		color:$blueColor !important;
	}
	.text-blue{
		font-size: 24upx;
		color:$blueColor !important;
	}
	.line-cyan{
		color:$cyanColor !important;
	}
	.text-cyan{
		font-size: 24upx;
		color:$cyanColor !important;
	}
	
	
	.round {
		border-radius: 50%;
	}
	.cu-tag-top {
		content: "";
		width: 84upx;
		height: 84upx;
		position: absolute;
		border: 6upx solid currentColor;
	}
	.page-m{
		margin-left: 100upx;
		line-height: 44upx;
	}
	.t-title{
		font-size: 48upx;
	}
	.t-text{
		font-weight: 500 !important; 
		font-size: 24upx; 
	}
	
	/* 具体运动数据 */
	.bg-img-yd{
		background-size: 256upx;
		background-position: right;
		position: relative;
	}
	.cu-yd{
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.page_motion_tag{
		padding: 0 30upx;
	}
	.cu-card {
		width: 620upx;
	}
	.cu-card.article>.cu-item {
		padding-bottom: 240upx;
		margin-left: 0px; 
	}
	.cardTitle{
		padding: 36upx 0upx 0upx 36upx;
		z-index: 1;
	}
	.yd-title{
		margin-bottom: 24upx;
		font-size: 48upx;
		font-weight: 700;
		color: #FFFFFF;
	}
	.yd-text{
		color: #FFFFFF;
	}
	.yd-text-title{
		font-size: 24upx;
	}
	.yd-text-t{
		font-size: 40upx;
		font-weight: 700;
	}
	/* 运动颜色 数据库取出 */
	.yd-red{
		background: $redColor-linear;
	}
	.yd-blue{
		background: $blueColor-linear;
	}
	.yd-purple{
		background: $purpleColor-linear;
	}
	.yd-black{
		background: $blackColor-linear;
	}
	.yd-cyan{
		background: $cyanColor-linear;
	}
	
	/* 具体健康数据 */
	.cu-card-jk {
		width: 100%;
		padding: 0 30upx;
		
		
	}
	.cu-card-jk.article>.cu-item {
		/*padding-bottom: 108upx;*/
		height: 800upx;
		margin-right: 0;
		margin-left: 0;
	}
	.cardTitle-jk{
		padding: 36upx 36upx;
		z-index: 1;
	}
	.jk-title{
		margin-bottom: 24upx;
		font-size: 48upx;
		font-weight: 700;
		color: $blackColor;
	}
	.jk-text{
		color: $blackColor;
	}
	.jk-text-title{
		font-size: 24upx;
	}
	.jk-text-t{
		font-size: 40upx;
		font-weight: 700;
	}
	.text-center{
		margin-right: 24upx;
	}
	.jk-cur{
		font-size: 28upx;
	}
	.heartbeat{
		margin-top: 128upx;
	}
	.heartbeat-line{
		width: 256upx;
		height: 256upx;
		margin-left: -12upx;
	}
	.heartbeat-text{
		font-size: 64upx;
	}
	.heartbeat-button{
		margin-top: 348upx;
		margin-left: -12upx;
	}
	.bg-red{
		background-color:$redColor;
	}
	
	.pulse{
		margin-top: 128upx;
	}
	.pulse-line{
		width: 256upx;
		height: 256upx;
		margin-left: -12upx;
	}
	.pulse-text{
		font-size: 64upx;
	}
	.pulse-button{
		margin-top: 348upx;
		margin-left: -12upx;
	}
	.bg-blue{
		background-color:$blueColor; 
	}
	
	
</style>
